import React from 'react'
import axios from 'axios'
import './Hero.css'
import { useState } from 'react'
import { useEffect } from 'react'
export default function Hero() {
  let [heros,setHeros] = useState([])
  let [keyword,setKeyword] = useState('')

  useEffect(()=>{
    let getHeros = async ()=>{
      let result = await axios.get('http://api.xiaohigh.com/heros')
      setHeros(result.data)
    }
    getHeros()
  },[])

  let change = (e)=>{
    setKeyword(e.target.value)
  }

  let search = async ()=>{
    let result = await axios.get('http://api.xiaohigh.com/heros',{
      params:{
        name_like:keyword
      }
    })
    setHeros(result.data)
  }

  return (
    <div className="hero-container">
      <h2>英雄列表</h2>
      <hr />
      <div className="form">
        <input type="text" value={keyword} onChange={change} /><button onClick={search}>搜索</button>
      </div>
      <hr />
      <div className="hero-list">
        {
          heros.map(item => {
            return <div key={item.id} className="hero-item">
                    <img src={"https://cdn.xiaohigh.com" + item.image} alt="" />
                    <p>{item.name}</p>
                  </div>
          })
        }
      </div>

    </div>
  )
}
